<template>
  <div class="bar-chart-05 chart" ref="barChart05"></div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
const barChart05 = ref(null);
const echarts = inject('$echarts');

const yAxisData =  ['2020年', '2021年', '2022年', '2023年'];
const seriesData = [{
  name: '商标',
  type: 'bar',
  data: [18203, 23489, 29034, 104970],
  barWidth: 10,
  barGap: 0.5,
  itemStyle: {
    color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
      { offset: 1, color: '#003CA0' },
      { offset: 0, color: '#0075F8' }
    ]),
    borderColor: "#01ADF5"
  },
},
{
  name: '设备',
  type: 'bar',
  data: [31000, 121594, 134141, 681807],
  barWidth: 10,
  itemStyle: {
    color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
      { offset: 1, color: '#026FA7' },
      { offset: 0, color: '#019BBC' }
    ]),
    borderColor: "#00D9E7"
  },
},
{
  name: '房屋',
  type: 'bar',
  data: [19325, 23433, 324432, 33333],
  barWidth: 10,
  itemStyle: {
    color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
      { offset: 1, color: '#12966F' },
      { offset: 0, color: '#7CFF2D' }
    ]),
    borderColor: "#7FFF17"
  }
},
{
  name: '土地',
  type: 'bar',
  data: [0, 23438, 31000, 281807],
  barWidth: 10,
  itemStyle: {
    color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
      { offset: 1, color: '#8B4E07' },
      { offset: 0, color: '#FFCC00' }
    ]),
    borderColor: "#FFCC00"
  }
}];


const option = {
  backgroundColor: '#021C3F',
  compCode: 'C202310042',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    textStyle: {
      color: "#ffffff",
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#FFF',
      fontSize: 14,
      margin: 10,
    },
  },
  yAxis: {
    type: 'category',
    data: yAxisData,
    show: true,
    axisTick: "none",
    axisLine: "none",
    splitLine: {
      show: false
    },
    lineStyle: {
      width: 5
    },
    axisLabel: {
      align: "top",
      verticalAlign: 'bottom',
      lineHeight: 85,
      color: '#fff',
      fontSize: 14,
      margin: 0
    },
  },
  series: seriesData
};


onMounted(() => {
  const chart = echarts.init(barChart05.value);
  chart.setOption(option);
});

</script>

<style scoped></style>
